<!-- 模板 -->
<template>
  <div class="company">
    <!-- 1、百度地图 -->
    <baidu-map :center="center" :zoom="zoom" style="width: 100%; height: 5rem">
      <!-- 标记 -->
      <bm-marker :position="center" id="my-element">
        <!-- 缩放按钮 -->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!-- 标记的图标 -->
        <bm-label
          content="霸都装饰"
          :labelStyle="style"
          :offset="{ width: -30, height: 30 }"
        ></bm-label>
      </bm-marker>
    </baidu-map>
    <!-- 2、显示公司的信息 -->
    <van-cell-group>
      <van-cell
        title="名称"
        icon="manager-o"
        center
        :value="company.name"
        is-link
      />
      <van-cell
        title="地址"
        icon="location-o"
        center
        :value="company.address"
        is-link
      />
      <van-cell
        title="电话"
        icon="phone-o"
        center
        :value="company.tel"
        is-link
      />
      <van-cell title="介绍" center :label="company.intro" />
    </van-cell-group>
    <!-- 3、底部的导航 -->
    <Tabbar :active="3"></Tabbar>
  </div>
</template>

<script>
import { request } from '../utils/request'
import Tabbar from './Tabbar.vue'
export default {
  name: '',
  data() {
    return {
      center: { lng: 117.28304, lat: 31.86119 },
      zoom: 15,
      company: {},
      style: {
        color: 'blue',
        fontSize: '16px',
        border: '1px solid blue',
        padding: '5px',
        borderRadius: '5px',
      },
    }
  },
  props: [],
  components: { Tabbar },
  computed: {},
  filters: {},
  methods: {
    async getCompany() {
      let { data: res } = await request({ url: 'company', type: 'get' })
      if (res.code !== 200) {
        return
      }
      this.$nextTick(function () {
        this.company = res.data[0]
        this.center.lng = res.data[0].longitude
        this.center.lat = res.data[0].latitude
      })
    },
  },
  created() {},
  mounted() {
    this.getCompany()
  },
}
</script>

<style lang="less" scoped>
.company {
  margin-bottom: 1.3rem;
}
.van-cell {
  //修改cell值的宽度
  .van-cell__value {
    min-width: 5rem;
  }
  //修改cell标题的宽度
  .van-cell__title {
    min-width: 1rem;
  }
}
</style>
